<script setup>
import { ref } from 'vue'
import { getAdminPersonPostListServer } from '@/api/postList'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'

const router = useRouter()
const userStore = useUserStore()

const goDetail = (item) => {
  router.push(`/postList/detail?item=${JSON.stringify(item)}`)
}

const postList = ref([])

const getAdminPersonPostList = async (state, feed, page) => {
  const res = await getAdminPersonPostListServer(state, feed, page)

  postList.value = res.data.data.records
  total.value = res.data.data.total
}
getAdminPersonPostList(2, 0)

const value = ref(0)
const stateValue = ref(2)
const options = ref([
  { value: 0, label: '全部' },
  { value: 1, label: '未喂养' },
  { value: 2, label: '已喂养' }
])
const options0 = ref([
  { value: 0, label: '全部' },
  { value: 1, label: '待审核' },
  { value: 2, label: '通过审核' },
  { value: 3, label: '未通过审核' }
])
const changePostList = () => {
  getAdminPersonPostList(stateValue.value, value.value)
}

const page = ref(1) // 页数
const total = ref(0) // 总条数
// 监听页面切换
const currentChange = async () => {
  await getAdminPersonPostList(stateValue.value, value.value, page.value)
}
</script>

<template>
  <page-container title="帖子信息">
    <template #extra>
      <el-select
        v-model="stateValue"
        placeholder="筛选审核"
        @change="changePostList"
        style="margin-right: 20px"
        v-if="userStore.user.type == 1"
      >
        <el-option
          v-for="item in options0"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-select
        v-model="value"
        placeholder="选择帖子"
        @change="changePostList"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>

    <section class="cardSection">
      <el-card
        class="cardBox"
        v-for="item in postList"
        :key="item.postId"
        @click="goDetail(item)"
      >
        <template #header>
          <div class="card-header">
            <span>{{ item.title }}</span>

            <tagSelect :index="item.feed" />
          </div>
        </template>
        <img :src="item.imageUrls[0]" alt="" class="cardImg" />
        <!-- <template #footer>Footer content</template> -->
      </el-card>
    </section>

    <div style="width: 100%; margin-top: 20px">
      <el-pagination
        v-model:current-page="page"
        @current-change="currentChange"
        :page-size="12"
        :page-sizes="[2, 3, 4, 5, 10]"
        layout="prev, pager, next"
        :total="total"
        style="flex: 1; justify-content: flex-end"
      />
    </div>

    <el-empty description="无数据" v-if="postList.length === 0" />
  </page-container>
</template>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.block {
  display: inline-flex;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.cardSection {
  display: flex;
  flex-wrap: wrap;
  .cardBox {
    width: 24%;
    margin-right: 1%;
    margin-bottom: 20px;
    &:nth-of-type(4n) {
      margin-right: 0;
    }
  }
}
.cardImg {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: 5px;
}
</style>
